<template>
  <view class="container" v-if="m_isLoaded">
    <!-- status info -->
    <view class="si">
      <view v-if="[0, 1, 4].includes(m_Order.FStateID)">
        <image class="img" src="/static/images/dfk.png" />
        <text class="st">{{ m_Order.FStateName }}</text>
      </view>
      <view v-if="[2, 5, 6].includes(m_Order.FStateID)">
        <image class="img" src="/static/images/yfk.png" />

        <text class="st">{{ m_Order.FStateName }}</text>
      </view>
      <view v-if="[9, 10].includes(m_Order.FStateID)">
        <image class="img" src="/static/images/yfk.png" />
        <text class="st">{{ m_Order.FStateName }}</text>
      </view>
    </view>

    <!-- order info  -->
    <view class="js">
      <view class="i">
        <view class="l">订单编号</view>
        <view class="r">{{ m_Order.FBillNo }}</view>
      </view>
      <view class="i">
        <view class="l">收货人</view>
        <view class="r">{{ m_Order.FConsignee }}</view>
      </view>
      <view class="i">
        <view class="l">手机</view>
        <view class="r">{{ m_Order.FTelephone }}</view>
      </view>
      <view class="i">
        <view class="l">收货地址</view>
        <view class="r">{{ m_Order.FAddress }}</view>
      </view>
      <view class="i">
        <view class="l">订单备注</view>
        <view class="r">{{ m_Order.FMessage }}</view>
      </view>
    </view>

    <!-- goods info -->
    <view class="gs" :key="order.rowId">
      <view class="ct">
        <view class="t">
          <view class="lf">
            商品明细（共
            {{ m_Goods.reduce((v, i) => v + parseInt(i.qty), 0) }} 件）
          </view>
        </view>
        <view class="product" v-for="(good, _index) in m_Goods" :key="key">
          <image class="image" :src="imageUrl + good.img" mode="aspectFit" />
          <view class="content">
            <view class="name">{{ good.title }}</view>
          </view>
          <view class="p-c">
            <view class="p">￥{{ parseFloat(good.price).toFixed(2) }}</view>
            <view class="q">x{{ parseInt(good.qty) }}</view>
          </view>
        </view>

        <view class="sm">
          <view class="i">
            <view class="l"> 商品金额</view>
            <view class="r">
              ￥{{
                m_Goods.reduce((p, i) => p + i.qty * i.price, 0).toFixed(2)
              }}</view
            >
          </view>
          <view class="i">
            <view class="l"> 优惠金额</view>
            <view class="r"> ￥{{ m_Order.FCouponMoney.toFixed(2) }}</view>
          </view>
          <view class="i">
            <view class="l">运费 </view>
            <view class="r"> ￥{{ m_Order.FShippingAmt.toFixed(2) }}</view>
          </view>
        </view>
        <view class="to">
          订单金额：<text class="sb">￥</text
          ><text class="price">{{ m_Order.FRealAmount.toFixed(2) }}</text>
        </view>
      </view>
    </view>
    <view class="li-test"></view>
  </view>
</template>

<script>
import { ref } from "@vue/composition-api";
import { reqPost } from "../../common/http.request";
import { uNavigateBack, uToast } from "../../utils/uniUtils";

export default {
  async onLoad({ id }) {
    if (id) {
      try {
        await this.GetPageData(id);
        this.m_isLoaded = true;
      } catch (error) {
        console.log("error :>> ", error);
        this.m_isLoaded = false;
        uToast("初始化失败！", "error");
        setTimeout(() => {
          uNavigateBack();
        }, 1500);
      }
    } else {
      this.m_isLoaded = false;
      uToast("初始化失败！", "error");
      setTimeout(() => {
        uNavigateBack();
      }, 1500);
    }
  },
  setup() {
    /* 
    mutable
    */
    const m_Order = ref({});
    const m_Goods = ref([]);
    const m_isLoaded = ref(false);

    const GetPageData = async function (orderId) {
      const { Order, Goods } = (
        await reqPost("OrderDetail", {
          orderId,
        })
      ).Data;
      m_Order.value = Order[0];
      m_Goods.value = Goods;
    };

    return {
      GetPageData,
      m_Goods,
      m_Order,
      m_isLoaded,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/orderDetail.scss";
</style>
